<template>
  <!-- 新增 -->
  <el-dialog :title="idadd" :visible="showadd" @close="btncancel">
    <template #default>
      <el-tabs>
        <el-tab-pane label="配置管理">
          <el-card>
            <el-row :gutter="20">
              <i class="el-icon-caret-bottom" /><span>基础信息</span>
            </el-row>
          </el-card>
          <br>
          <br>
          <br>
          <!-- 表单 -->
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-row :gutter="20">
              <el-col :span="10" style="margin-left: 45px;">
                <el-form-item label="店铺名称" prop="shopname">
                  <el-input
                    v-model="form.shopname"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="分店名称" prop="branchname">
                  <el-input
                    v-model="form.branchname"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="所属行业" prop="industry">
                  <el-input
                    v-model="form.industry"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="身份证号" prop="idnumber">
                  <el-input
                    v-model="form.idnumber"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="注册邮箱" prop="mailbox">
                  <el-input
                    v-model="form.mailbox"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input
                    v-model="form.address"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="电话号码" prop="mobile">
                  <el-input
                    v-model="form.mobile"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="推广人名称" prop="mobilename">
                  <el-input
                    v-model="form.mobilename"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="权益级别" prop="interests">
                  <el-input
                    v-model="form.interests"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="权益时效" prop="interestsaging">
                  <el-input
                    v-model="form.interestsaging"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="销售额" prop="sales">
                  <el-input
                    v-model="form.sales"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="状态" prop="state">
                  <el-input
                    v-model="form.state"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="性质" prop="nature">
                  <el-input
                    v-model="form.nature"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="form.remark"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>

                <el-form-item label="营业时间">
                  <el-time-picker
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                  <el-time-picker
                    arrow-control
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                </el-form-item>

                <el-form-item label="单选">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="独立经营" />
                    <el-radio label="共同经营" />
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="主要产品">
                  <image-upload style="margin-top: 8px;" />
                  <br>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload" />
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="主要产品">
                  <div class="block">
                    <span class="demonstration">默认</span>
                    <el-image :src="src" />
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="7" style="margin-left: 70px;">
                <el-form-item label="店铺头像">
                  <image-upload />
                </el-form-item>

                <el-form-item label="营业执照">
                  <image-upload />
                </el-form-item>

                <el-form-item label="上传证件">
                  <image-upload />
                </el-form-item>

                <el-form-item label="店铺实拍">
                  <image-upload />
                </el-form-item>

                <br>
                <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                >
                  <i class="el-icon-upload" />
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                </el-upload>

                <el-form-item label="地图选点" prop="scalselect">
                  <el-input
                    v-model="form.scalselect"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    v-model="form.address"
                    style="width: 250px;"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row :gutter="20">
            <el-col :span="15" :offset="15">
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button @click="btncancel">取 消</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane label="配置管理">
          <el-card>
            <i class="el-icon-caret-bottom" /><span>产品:配送方式</span>
          </el-card>
          <br>
          <br>
          <el-form>
            <el-row :gutter="20">
              <el-col :span="10" style="margin-left: 45px;">
                <el-form-item label="是否到店">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="选项一" />
                    <el-radio label="选项二" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="是否同城配送" label-width="100px">
                  <el-radio-group v-model="form.resourceq">
                    <el-radio label="选项一" />
                    <el-radio label="选项二" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="地图选点">
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="地图选点">
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="配送时间">
                  <el-time-picker
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                  <el-time-picker
                    arrow-control
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                </el-form-item>
                <el-form-item label="是否支持区域配送" label-width="100px">
                  <el-radio-group v-model="form.resourceq">
                    <el-radio label="选项一" />
                    <el-radio label="选项二" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="起配费用：" po>
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="每公里/元">
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="配送范围/公里">
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="跨域每公里/元">
                  <el-input style="width: 250px;" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="配送时间">
                  <el-time-picker
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                  <el-time-picker
                    arrow-control
                    :picker-options="{
                      selectableRange: '18:30:00 - 20:30:00'
                    }"
                    style="width: 125px;"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row :gutter="20">
            <el-col :span="15" :offset="15">
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button @click="btncancel">取 消</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </template>
  </el-dialog>
</template>
<script>
import { addshore, editshore } from '@/api/shorelist';
export default {
  name: 'Haha',
  props: {
    showadd: {
      type: Boolean,
      default: false,
    },
    dates: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      src: '../',
      form: {
        shopname: '', // 店铺名称
        branchname: '', // 分店名称
        industry: '', // 所属行业
        idnumber: '', // 身份证号
        mailbox: '', // 注册邮箱
        scalselect: '', // 地图选点
        address: '', // 详细地址
      },
      //   表单校验
      rules: {
        shopname: [
          { required: true, message: '店铺名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位',
          },
        ],
        branchname: [
          { required: true, message: '分店名称不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 4,
            message: '用户姓名为1-4位',
          },
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur',
          },
        ],
        idnumber: [
          { required: true, message: '身份证不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '身份证格式不正确',
            trigger: 'blur',
          },
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' },
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' },
        ],
        timeOfEntry: [{ required: true, message: '入职时间', trigger: 'blur' }],
      },
    };
  },
  computed: {
    idadd() {
      return this.form.id ? '编辑店铺' : '新增店铺';
    },
  },
  created() {
    // 编辑存储的数据
    this.$nextTick(() => {
      console.log(this.dates);
      this.form = this.dates;
    });
  },
  methods: {
    // 点击创建
    async onSubmit() {
      try {
        await this.$refs.form.validate();
        if (this.form.id) {
          // 编辑操作
          await editshore(this.form);
          this.$parent.dialogVisible = false;
        } else {
          // 新增操作
          await addshore(this.form);
          this.$parent.dialogVisible = false;
        }
        this.$message.success('操作成功！');
      } catch (error) {
        console.log(error);
      }
    },

    // 点击关闭 清除数据
    btncancel() {
      this.form = {
        shopname: '', // 店铺名称
        branchname: '', // 分店名称
        industry: '', // 所属行业
        idnumber: '', // 身份证号
        mailbox: '', // 注册邮箱
        scalselect: '', // 地图选点
        address: '', // 详细地址
      };
      this.$parent.dialogVisible = false;
    },
  },
};
</script>
<style lang="less"></style>
